<template>
    <div class="frame">
        <el-dialog
        :title="this.$t('dt.transfer')+'DATX'"
        :visible.sync="showIn"
        width="440px"
        :before-close="closeFrame"
        >  
        <div class="content ">
            <div class="content-title">DATX-Wallet</div>
            <div class="content-copy">
                <span>{{datxDetail.name}}</span>
                <img src="../../assets/images/copy.png" alt=""
                          v-clipboard:copy="datxDetail.name"
                          v-clipboard:success="onCopy"
                          v-clipboard:error="onError">
            </div>
            <div class="content-code">
              <div id="qrcode" ref="qrcode"></div>
                <!--<div><img src="../../assets/images/code.png" alt=""></div>-->
                <p>{{$t("dt.transferNotice")}}</p>
        </div>
        </div>
    </el-dialog>
    </div>
</template>
<script>
export default{
    data(){
        return{
             datxDetail:{},
             showIn:true,
             coinName:''
         }
    },
  props: ["unit"],
  created(){
    this.datxDetail = JSON.parse(window.sessionStorage.getItem("walletdetail"))
    this.qrcode()
  },
   methods:{
        // 转入
        closeFrame(){
           this.$emit('indatxListen',false)
        },

      // 复制成功
        onCopy(){
            this.$message({
                message: this.$t("dt.copySuccess"),
                type: 'success'
                });
        },
        
        // 复制失败
        onError(){
            this.$message({
                message: this.$t("dt.copydefault"),
                type: 'erro'
                });
        },
     qrcode () {
          setTimeout(()=>{
            let qrcode = new this.QRCode('qrcode', {
              width: 180,
              height: 180,
            });
            qrcode.makeCode(this.datxDetail.name)
          })
      },
    }
}
</script>
<style lang="less" scoped>
.frame{
    .content{
        .content-title{
            text-align: center;
            color: #98889b;
            font-size: 18px;
        }
        .content-copy{
            font-size: 12px;
            color: #666666;
            text-align: center;
            text-align: center;
            cursor: pointer;
            img{
              width: 12px;
              height: 14px;
              margin-bottom: -2px;
              margin-right: 8px;
            }
        }
        .content-code{
            margin: 20px 0;
            padding: 20px 0;
            height: 262px;
            background-color: #fbfbfc;
            div{
                width: 178px;
                height: 178px;
                margin: 0 auto;
                img{
                    width: 100%;
                }
            }
            p{
                margin: 10px;
                color: #666666; 
                text-align: center;
            }
        }
        .content-input{
            padding: 10px 20px;
            margin-top: 20px;
            background:#fbfbfc;; 
            color: #666666;
            input{
            width: 349px;
            height: 34px;
            padding: 0 10px;
            border-radius: 4px;
            border: solid 1px #eeeeee;
            background-color: #ffffff; 
            }
            input::-webkit-input-placeholder {
            font-size: 12px;
            color: #c5c7cb;
            
        }
            .balance{
            margin-bottom: 15px;  
            }
            .transfer{
                padding-bottom: 20px;
                border-bottom: 1px solid #eaedf5;
                div{
                    line-height: 34px;
                }
            }
            .memo{
                padding-top: 20px 
            }
            .adress{
                margin-bottom: 15px;   
            }
        
        }
        .content-button{ 
            margin: 22px 0;
        button{
            color:#fff;
            width: 400px;
            margin:  0 auto;
            display: block;
            border-radius: 4px;
            line-height:32px;
            text-align: center;
            background-color: #98889b;
            outline: none;
            border: none;
            cursor: pointer;
        }
        button:hover{
            opacity: .8;
        }   
        }
    }
}
</style>
<style lang="less" >
.frame{
    .el-dialog__wrapper{ 
        .el-dialog{
                    border-radius: 8px;
            }
            .el-dialog__header{
                border-bottom:1px solid #eaedf5;
                color:#000000;
                font-size: 18px;
                font-weight: bold;
                padding:20px;
            }
            .el-dialog__body{
                padding:30px 0;
            }
            .el-dialog__headerbtn .el-dialog__close{
                color: #666666;
                
        }
    }          
}
</style>


